

require(["../scripts/conf/config.js"], function(){
	require(["jquery","swiper"], function($,Swiper){
	
		$(function(){
			//your code....  
			var projectList = document.getElementsByClassName('project-list')[0];
			var pagination = document.getElementsByClassName('pagination')[0];
			var bannerWrapper = document.getElementsByClassName('banner-wrapper')[0];
			var myCityIndex = -1;
			var myTypeIndex = '全部类型';
			var myOrderIndex = ''
			var myPage = 1;

						

			myReturnTop();
			myPosition();
			myType();
			myTime();
			myLoadPage();
			mainFunction();
			mySignIn();
			myLogin();
			
			function myPosition(){//筛选城市
				$.ajax({
					type : 'GET',
					url : `/api/ticket/city/list?channel=4`,
					success(data){
						var cityList = document.getElementsByClassName('city-list')[0];
						var cityItem = document.getElementsByClassName('city-item');
						cityList.innerHTML = '<li class="city-item active">全国</li>'
						for(var i=0;i<data.data.list.length;i++){
							cityList.innerHTML += `<li class="city-item">${data.data.list[i].name}</li>`;
						}
						for(var j=1;j<cityItem.length;j++){
							cityItem[j].index = data.data.list[j-1].id;
							cityItem[j].onclick = function(){
								for(var k=0;k<cityItem.length;k++){//取消active
									cityItem[k].className = 'city-item';
								}
								this.className +=' active';
								myCityIndex = this.index;
								main2Function();
							}//点击事件
						}
						
					}
				});
			}
			function myType(){//筛选类型
				$.ajax({
					type : 'GET',
					url : `/api/ticket/project/listconf?city_id=-1`,
					success(data){
						var currentType = document.getElementsByClassName('current-type');
						for(var i=1;i<currentType.length;i++){
							currentType[i].innerHTML = `<span class="my-span-type">${data.data.tags[i].value}
													<span class="my-span-type number-span">（${data.data.tags[i].project_num}）</span>
													</span>`;
						}
						//var mySpanType = document.getElementsByClassName('my-span-type');

						for(var j=0;j<currentType.length;j++){
							currentType[j].firstElementChild.index = data.data.tags[j].value;
							
							currentType[j].onclick = function(){
								for(var k=0;k<currentType.length;k++){
									currentType[k].firstElementChild.className = '';
								}
								this.firstElementChild.className += 'active';
								myTypeIndex = this.firstElementChild.index;
								main2Function();
							}
						}
					}
				})
			}
			function myTime(){//筛选时间
				$.ajax({
					type : 'GET',
					url : `/api/ticket/project/listconf?city_id=-1&time=10-0`,
					success(data){
						var orderList = document.getElementsByClassName('order-list')[0];
						for(var i=0;i<data.data.filter.length;i++){
							orderList.innerHTML +=  `<li class="first order-item">${data.data.filter[i].value}</li>`;
						}
						var orderItem = document.getElementsByClassName('order-item');
						for(var j=0;j<orderItem.length;j++){
							orderItem[j].index = data.data.filter[j].key;
							orderItem[j].onclick = function(){
								for(var k=0;k<orderItem.length;k++){
									orderItem[k].className = 'first order-item';
								}
								this.className += ' active';
								myOrderIndex = this.index;
								main2Function();
							}
						}
					}
				})
			}
			function mainFunction(){//加载首页

				$.ajax({
					type : 'GET',
					url : `/api/ticket/project/listV2?version=134&page=${myPage}&pagesize=16&area=${myCityIndex}&filter=${myOrderIndex}&platform=web&p_type=${myTypeIndex}`,
					success(data){
						for(var i=0;i<data.data.pagesize;i++){
						// 	projectList.innerHTML +=`<div class="project-list-item">
						// 								 <div class="project-list-item-img" style="background-image: url(http:${data.data.result[i].cover})"></div>
						// 								 <div class="project-list-item-detail">
						// 									 <div class="project-list-item-title">${data.data.result[i].project_name}</div>
						// 									 <div class="project-list-item-time">
						// 										 <span class="icon time-icon"></span>
						// 										 "${data.data.result[i].start_time} - ${data.data.result[i].end_time}"
						// 									 </div>
						// 									 <div class="project-list-item-address">
						// 										 <span class="icon address-icon"></span>
						// 										 <span class="city-name">${data.data.result[i].city_name}</span>
						// 										 <span class="venue-name-and-address">${data.data.result[i].venue_name}</span>
						// 									 </div>
						// 									 <div class="project-list-item-price">
						// 										 <div class="not-free">
						// 											 <span class="price-symbol">￥</span>
						// 											 <span class="price">${data.data.result[i].price_low/100}</span>
						// 											 <span class="start">起</span>
						// 										 </div>
						// 									 </div>
						// 								 </div>
						// 							 </div>
						// 							`;
					
							var projectListItem = document.createElement('div');
							projectListItem.className = 'project-list-item';
							projectList.appendChild(projectListItem);
	
							var projectListItemImg = document.createElement('div');
							projectListItemImg.className = 'project-list-item-img';
							projectListItemImg.style.backgroundImage ='url(http:'+data.data.result[i].cover+')';
							projectListItem.appendChild(projectListItemImg);
	
							var projectListItemDetail = document.createElement('div');
							projectListItemDetail.className = 'project-list-item-detail';
							projectListItem.appendChild(projectListItemDetail);
	
							var projectListItemTitle = document.createElement('div');
							projectListItemTitle.className = 'project-list-item-title';
							projectListItemTitle.innerHTML = data.data.result[i].project_name;
							projectListItemDetail.appendChild(projectListItemTitle);
	
							var projectListItemTime = document.createElement('div');
							projectListItemTime.className = 'project-list-item-time';
							projectListItemTime.innerHTML = '<span class="icon time-icon"></span>'+data.data.result[i].start_time+' - '+data.data.result[i].end_time;
							projectListItemDetail.appendChild(projectListItemTime);
	
							var projectListItemAddress = document.createElement('div');
							projectListItemAddress.className = 'project-list-item-address';
							projectListItemAddress.innerHTML = `<span class="icon address-icon"></span>
																<span class="city-name">${data.data.result[i].city_name}</span>
																<span class="venue-name-and-address">${data.data.result[i].venue_name}</span>`;
							projectListItemDetail.appendChild(projectListItemAddress);
	
							var projectListItemPrice = document.createElement('div');
							projectListItemPrice.className = 'project-list-item-price';
							projectListItemDetail.appendChild(projectListItemPrice);
	
							var notFree = document.createElement('div');
							notFree.className = 'not-free';
							notFree.innerHTML = `<span class="price-symbol">￥</span>
													<span class="price">${data.data.result[i].price_low/100}</span>
													<span class="start">起</span>`;
							projectListItemPrice.appendChild(notFree);
							var notFree = document.getElementsByClassName('not-free');
							if(data.data.result[i].promo){
								if(data.data.result[i].promo[0].type){
									notFree[i].innerHTML += `<span class="promo-item">${data.data.result[i].promo[0].type_name}</span>`
								}
							}
							if(data.data.result[i].label){
								notFree[i].innerHTML += `<span class="promo-item">${data.data.result[i].label}</span>`
							}

							
						
						}//for
						var myProjectListItemDetail = document.getElementsByClassName('project-list-item-detail');
						for(let i = 0;i<myProjectListItemDetail.length;i++){
							myProjectListItemDetail[i].onclick = function(){
								window.open(`https://localhost:8000/pages/detail.html?id=${data.data.result[i].id}`);
							}
						}
					}//success
				});
				myBannerWrapper();
				fanye();
				
			}	
			function myBannerWrapper(){//加载banner
				$.ajax({
					type : 'GET',
					url : `/api/ticket/banner/list?district_id=${myCityIndex}&position=2&sub_position=0`,
					success(data){
						if(data.data){
							bannerWrapper.innerHTML ='';
							bannerWrapper.innerHTML = `<div><div><img src=http:${data.data[0].pic}></div></div>`;
							
							//else if(data.data.length > 1){  
							// 	if(bannerWrapper.bannerWrapper){
							// 		for(var i=0;i<data.data.length;i++){									
							// 			swiperWrapper.innerHTML +=`<div class="swiper-slide">
							// 										<img src="${data.data[i].pic}">
							// 										</div>`;
							// 		}
							// 		}else{
							// 			var swiperContainer	= document.createElement('div');
							// 			swiperContainer.className = 'swiper-container';
							// 			bannerWrapper.appendChild(swiperContainer);

							// 			var swiperPagination = document.createElement('div');
							// 			swiperPagination.className = 'swiper-pagination';
							// 			swiperContainer.appendChild(swiperPagination);
							// 			var swiperButtonPrev = document.createElement('div');
							// 			swiperButtonPrev.className = 'swiper-button-prev';
							// 			swiperContainer.appendChild(swiperButtonPrev);
							// 			var swiperButtonNext = document.createElement('div');
							// 			swiperButtonNext.className = 'swiper-button-next';
							// 			swiperContainer.appendChild(swiperButtonNext);								
							// 			var swiperWrapper = document.createElement('div');
							// 			swiperWrapper.className = 'swiper-wrapper';
							// 			swiperContainer.appendChild(swiperWrapper);
									
							// 			for(var i=0;i<data.data.length;i++){									
							// 				swiperWrapper.innerHTML +=`<div class="swiper-slide">
							// 											<img src="${data.data[i].pic}"alt="">
							// 											</div>`;
							// 			}
							// 		}
							// 	}
						}
					}
					
				})
			}	
			function main2Function(){//翻页后加载
				$.ajax({
					type : 'GET',
					url : `/api/ticket/project/listV2?version=134&page=${myPage}&pagesize=16&area=${myCityIndex}&filter=${myOrderIndex}&platform=web&p_type=${myTypeIndex}`,
					//	   /api/ticket/project/listV2?version=134&page=1&pagesize=16&area=310100&filter=&platform=web&p_type=%E6%BC%94%E5%87%BA
					success(data){
						var myProjectListItemImg = document.getElementsByClassName('project-list-item-img');
						var myProjectListItemTitle = document.getElementsByClassName('project-list-item-title');
						var myProjectListItemTime = document.getElementsByClassName('project-list-item-time');
						var myProjectListItemAddress = document.getElementsByClassName('project-list-item-address');
						var myNotFree = document.getElementsByClassName('not-free');							
							
						for(var i=0;i<data.data.pagesize;i++){
	
							myProjectListItemImg[i].style.backgroundImage ='url(http:'+data.data.result[i].cover+')';
							myProjectListItemTitle[i].innerHTML = data.data.result[i].project_name;	
							myProjectListItemTime[i].innerHTML = '<span class="icon time-icon"></span>'+data.data.result[i].start_time+' - '+data.data.result[i].end_time;	
							myProjectListItemAddress[i].innerHTML = `<span class="icon address-icon"></span>
																<span class="city-name">${data.data.result[i].city_name}</span>
																<span class="venue-name-and-address">${data.data.result[i].venue_name}</span>`;	
							myNotFree[i].innerHTML = `<span class="price-symbol">￥</span>
												 <span class="price">${data.data.result[i].price_low/100}</span>
												 <span class="start">起</span>`;
							
							if(data.data.result[i].promo){
								if(data.data.result[i].promo[0].type){
									myNotFree[i].innerHTML += `<span class="promo-item">${data.data.result[i].promo[0].type_name}</span>`
								}
							}
							if(data.data.result[i].label){
								myNotFree[i].innerHTML += `<span class="promo-item">${data.data.result[i].label}</span>`
							}
	
						}//for
						
					},//success
				});
				myBannerWrapper();
				fanye();
			}
			function fanye(){//翻页
				var myPageNum = document.getElementsByClassName('pageNum');
				for(var j=0;j<myPageNum.length;j++){
					$('.pageNum').click(function () {//自定义动画
						$('html').animate({
							scrollTop: 250
						}, 200);
						return false;
					});
					myPageNum[j].onclick = function(){
						for(var k=0;k<myPageNum.length;k++){//清除页码active
							myPageNum[k].className = 'pageNum';
						}
						myPage = this.innerHTML;
						myPage = parseInt(myPage);
						myLoadPage();
						main2Function();
					}
				}
				// if(myPage == 1){
				// 	paginationLeftArrow.style.cursor = 'auto';
				// }else{
				// 	paginationLeftArrow.style.cursor = 'pointer';
				// 	$('.pagination-left-arrow').click(function () {//自定义动画
				// 		$('html').animate({
				// 			scrollTop: 0
				// 		}, 200);
				// 		return false;
				// 	});
				// 	paginationLeftArrow.onclick = function(){
				// 		for(var k=0;k<myPageNum.length;k++){//清除页码active
				// 			myPageNum[k].className = 'pageNum';
				// 		}
				// 		myPage -= 1;
				// 		myPage = parseInt(myPage);
				// 		if(myPage>1 && myPage<63){
				// 			pagination.innerHTML = `<span class="pageNum">${myPage-1}</span>
				// 									<span class="pageNum  active">${myPage}</span>
				// 									<span class="pageNum">${myPage+1}</span>
				// 									<span class="pageNum">${myPage+2}</span>
				// 									<span class="pageNum">${myPage+3}</span>
				// 									`;
				// 		}else if(myPage==1){
				// 			pagination.innerHTML = `<span class="pageNum  active">${myPage}</span>
				// 										<span class="pageNum">${myPage+1}</span>
				// 										<span class="pageNum">${myPage+2}</span>
				// 										<span class="pageNum">${myPage+3}</span>
				// 										<span class="pageNum">${myPage+4}</span>
				// 										`;
				// 		}else if(myPage==63){
				// 			pagination.innerHTML = `<span class="pageNum">${myPage-4}</span>
				// 									<span class="pageNum">${myPage-3}</span>
				// 									<span class="pageNum">${myPage-2}</span>
				// 									<span class="pageNum">${myPage-1}</span>
				// 									<span class="pageNum  active">${myPage}</span>
				// 									`;
				// 		}
				// 		main2Function();	
				// 	}
				// }
				// if(myPage == 63){
				// 	paginationRightArrow.style.cursor = 'auto';
				// }else{
				// 	paginationRightArrow.style.cursor = 'pointer';
				// 	$('.pagination-right-arrow').click(function () {//自定义动画
				// 		$('html').animate({
				// 			scrollTop: 0
				// 		}, 200);
				// 		return false;
				// 	});
				// 	paginationLeftArrow.onclick = function(){
				// 		for(var k=0;k<myPageNum.length;k++){//清除页码active
				// 			myPageNum[k].className = 'pageNum';
				// 		}
				// 		myPage += 1;
				// 		myPage = parseInt(myPage);
				// 		if(myPage>1 && myPage<63){
				// 			pagination.innerHTML = `<span class="pageNum">${myPage-1}</span>
				// 									<span class="pageNum  active">${myPage}</span>
				// 									<span class="pageNum">${myPage+1}</span>
				// 									<span class="pageNum">${myPage+2}</span>
				// 									<span class="pageNum">${myPage+3}</span>
				// 									`;
				// 		}else if(myPage==1){
				// 			pagination.innerHTML = `<span class="pageNum  active">${myPage}</span>
				// 										<span class="pageNum">${myPage+1}</span>
				// 										<span class="pageNum">${myPage+2}</span>
				// 										<span class="pageNum">${myPage+3}</span>
				// 										<span class="pageNum">${myPage+4}</span>
				// 										`;
				// 		}else if(myPage==63){
				// 			pagination.innerHTML = `<span class="pageNum">${myPage-4}</span>
				// 									<span class="pageNum">${myPage-3}</span>
				// 									<span class="pageNum">${myPage-2}</span>
				// 									<span class="pageNum">${myPage-1}</span>
				// 									<span class="pageNum  active">${myPage}</span>
				// 									`;
				// 		}
				// 		main2Function();	
				// 	}
				// }
				
			}
			function myReturnTop(){//返回顶部
				window.onscroll= function(){
					//变量t是滚动条滚动时，距离顶部的距离
					var t = document.documentElement.scrollTop||document.body.scrollTop;
					var scrollup = document.getElementsByClassName('scroll-top-wrapper')[0];
					//当滚动到距离顶部200px时，返回顶部的锚点显示
					if(t>=500){
						scrollup.style.display="block";
					}else{          //恢复正常
						scrollup.style.display="none";
					}
				}
				$('.scroll-top-wrapper').click(function () {//自定义动画
					$('html').animate({
						scrollTop: 0
					}, 200);
					return false;
				});
			}	
			function myLoadPage(){//加载页码
				if(myPage>1 && myPage<63){
					pagination.innerHTML = `<span class="pageNum">${myPage-1}</span>
					<span class="pageNum  active">${myPage}</span>
					<span class="pageNum">${myPage+1}</span>
					<span class="pageNum">${myPage+2}</span>
					<span class="pageNum">${myPage+3}</span>
					`;
				}else if(myPage==1){
					pagination.innerHTML = `<span class="pageNum  active">${myPage}</span>
					<span class="pageNum">${myPage+1}</span>
					<span class="pageNum">${myPage+2}</span>
					<span class="pageNum">${myPage+3}</span>
					<span class="pageNum">${myPage+4}</span>
					`;
				}else if(myPage==63){
					pagination.innerHTML = `<span class="pageNum">${myPage-4}</span>
					<span class="pageNum">${myPage-3}</span>
					<span class="pageNum">${myPage-2}</span>
					<span class="pageNum">${myPage-1}</span>
					<span class="pageNum  active">${myPage}</span>
					`;
				}
			}
			function myLogin(){//登录
				let login = document.getElementsByClassName('nav-header-register')[0];
				login.onclick = function(){
					Dialog({
						title : '登录',
						content : `<div  class="myLoginTable">账号: <input type="text" placeholder="Username" id="my-username"></div></br>
									<div  class="myLoginTable">密码: <input type="text" placeholder="Password" id="my-password"></div>`,
						contentBgColor: "lightblue",
						width : 420,
						height : 350,
						ok : {
							click(){
								var myUserName = document.getElementById('my-username');
								var myPassWord = document.getElementById('my-password');
								console.log(localStorage.getItem(myUserName.value))
								if( myUserName.value && myPassWord.value){
									if(localStorage.getItem(myUserName.value) && localStorage.getItem(myUserName.value) == myPassWord.value){
										document.cookie = `username=${myUserName.value}`;
										document.cookie = `password=${myPassWord.value}`;
										console.log(document.cookie.value[1]);
										var navHeaderRegisLogin = document.getElementsByClassName('nav-header-regis-login')[0];
										navHeaderRegisLogin.innerHTML = `<div class="nav-header-login">
																				<a>${myUserName.value}</a>
																			</div>`;
									}else{
										alert('密码错误，请重新登录！')
									}
								}else{
									alert('请输入用户名和密码！')
								}
							}
						}
					});
				}
			}
			function mySignIn(){//注册
				let signIn = document.getElementsByClassName('nav-header-login')[0];
				signIn.onclick = function(){
					Dialog({
						title : '注册',
						content : `<div  class="myLoginTable">账号: <input type="text" placeholder="Username" id="my-username"></div></br>
									<div  class="myLoginTable">密码: <input type="text" placeholder="Password" id="my-password"></div>`,
						contentBgColor: "lightblue",
						width : 420,
						height : 350,
						ok : {
							click(){
								var myUserName = document.getElementById('my-username');
								var myPassWord = document.getElementById('my-password');
								if( myUserName.value && myPassWord.value){
									if(!localStorage.getItem('myUserName.value')){
										localStorage.setItem (`${myUserName.value}`,`${myPassWord.value}`);
									}else{
										alert('用户已存在，请重新注册！')
									}
								}
							}
						}
					});
				}
			}
			function mystutes(){//判断登录状态
			} 
			function myOpenWindow(){
				document.getElementsByClassName('')
			}

			//弹窗插件
			function Dialog(opts){
				return new DialogCon(opts);
			}
			class DialogCon {
				constructor(opts){
					this.opts = Object.assign({
						title : '',
						content : '',
						width : 640,
						height : 400,
						contentBgColor : 'white',
						draggable : false,
						ok : { click(){} },
						cancel : { click(){} }
					} , opts);
					this.init();
				}
				init(){
					this.createPopup();
					this.createMask();
					this.fadeIn();
					this.bloundEvent();
					if(this.opts.draggable){
						this.dragTitle();
					}
				}
				createPopup(){
					this.dialog = document.createElement('div');
					this.dialog.className = 'dialog';
					this.dialog.style.width = this.opts.width + 'px';
					this.dialog.style.height = this.opts.height + 'px';
					this.dialog.style.left = (document.documentElement.clientWidth - this.opts.width)/2 + 'px';
					this.dialog.style.top = (document.documentElement.clientHeight - this.opts.height)/2 + 'px';
					this.dialog.innerHTML = `
						<div class="dialog-close">X</div>
						<div class="dialog-title">${this.opts.title}</div>
						<div class="dialog-content" style="background-color:${this.opts.contentBgColor}">${this.opts.content}</div>
						<div class="dialog-button">
							<div class="dialog-button-cancel">取消</div>
							<div class="dialog-button-ok">确定</div>
						</div>
					`;
					document.body.appendChild(this.dialog);
				}
				createMask(){
					this.mask = document.createElement('div');
					this.mask.className = 'dialog-mask';
					this.mask.style.width = document.documentElement.clientWidth + 'px';
					this.mask.style.height = Math.max(document.body.offsetHeight , document.documentElement.clientHeight) + 'px';
					document.body.appendChild(this.mask);
				}
				bloundEvent(){  //事件操作
					let dialogClose = this.dialog.getElementsByClassName('dialog-close')[0];
					let dialogCancel = this.dialog.getElementsByClassName('dialog-button-cancel')[0];
					let dialogOk = this.dialog.getElementsByClassName('dialog-button-ok')[0];
					/* dialogClose.onclick = dialogCancel.onclick = dialogOk.onclick = async ()=>{
						await this.fadeOut();
						document.body.removeChild(this.dialog);
						document.body.removeChild(this.mask);
					} */
					dialogClose.onclick = () => closeFn();
					dialogCancel.onclick = () => {
						this.opts.cancel.click();
						closeFn();
					};
					dialogOk.onclick = () => {
						this.opts.ok.click();
						closeFn();
					};
					let closeFn = async ()=>{
						await this.fadeOut();
						document.body.removeChild(this.dialog);
						document.body.removeChild(this.mask);
					}
				}
				fadeIn(){
					this.dialog.style.transform = 'scale(.5)';
					this.dialog.style.opacity = 0;
					this.mask.style.opacity = 0;
					setTimeout(()=>{
						this.dialog.style.transition = '.5s';
						this.mask.style.transition = '.5s';
						this.dialog.style.transform = 'scale(1)';
						this.dialog.style.opacity = 1;
						this.mask.style.opacity = 1;
					},0);
				}
				fadeOut(){
					let promise = new Promise((resolve,reject)=>{
						this.dialog.style.transform = 'scale(.5)';
						this.dialog.style.opacity = 0;
						this.mask.style.opacity = 0;
						this.dialog.addEventListener('transitionend',function add(){
							resolve();
							this.removeEventListener('transitionend',add);
						});
					});
					return promise;
				}
				dragTitle(){   //拖拽标题区域
					let dialogTitle = this.dialog.getElementsByClassName('dialog-title')[0];
					let disX = 0;
					let disY = 0;
					dialogTitle.style.cursor = 'pointer';
					dialogTitle.onmousedown = (ev)=>{
						this.dialog.style.transition = '';
						disX = ev.pageX - this.dialog.offsetLeft;
						disY = ev.pageY - this.dialog.offsetTop;
						document.onmousemove = (ev)=>{
							this.dialog.style.left = ev.pageX - disX + 'px';
							this.dialog.style.top = ev.pageY - disY + 'px';
						};
						document.onmouseup = ()=>{
							this.dialog.style.transition = '.5s';
							document.onmousemove = document.onmouseup = null;
						};
						ev.preventDefault();
					};
				}
			}
			
		})
	})
})